/*
 * @Description: 包含网络错误的socoll组件
 * @Author: buwei.huang
 * @Date: 2019-06-17 15:15:59
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-17 15:16:48
 */
<template>
  <div
    ref="mescroll"
    :class="{'mescroll':!this.useBody}"
  >
    <!-- class="mescroll" -->
    <div :class="nodata?'data-div':''">
      <div
        class="err-style fontsize28"
        v-if="neterror"
      >
        网络开小差了
      </div>
      <slot name="header"></slot>
      <slot v-if="count > 0"></slot>
      <slot
        name="NoDataModule"
        v-if="nodata"
      >
        <div>暂无更多数据</div>
      </slot>
    </div>
  </div>
</template>

<script>
import { XBScroll } from 'vue-xb-ui-depot'
export default {
  extends: XBScroll,
  props: {
    up: {
      type: Object,
      default: () => {
        return {
          noMoreSize: 10,
          page: { size: 10 }
        }
      }
    },
    show: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      neterror: false // 网络错误，只有第一页协议数据获取失败才为true
    }
  },
  components: {

  },
  methods: {
    upCallback(page) {
      this.getListData(page.num, page.size).then(({ length, count }) => {
        this.nodata = false
        this.neterror = false
        // this.$emit('changeNeterror', false)
        this.count = count || 0
        if (page.num === 1) {
          this.endXBRefresh()
        }
        this.$nextTick(() => {
          this.mescroll.endBySize(length, this.count)
        })
        if (this.count <= 0) {
          this.nodata = true
        }
        if (this.count < this.up.noMoreSize) {
          this.hideNoMoreHtml()
        }
      }).catch(error => {
        console.error('~~scroll error', error)
        this.neterror = true
        // this.$emit('changeNeterror', true)
        if (page.num === 1) {
          // 第一页获取数据失败时展示无数据
          // this.nodata = true
          // 第一页获取数据失败时展示网络错误
          this.nodata = false
          this.endXBRefresh()
        }
        if (this.count > 0) {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          this.mescroll.endErr()
        } else {
          this.mescroll.endBySize(0, this.count)
        }
      })
    }
  }
}
</script>

<style>
.mescroll {
  overflow-x: hidden;
  /* 为了让滑动更流畅 */
  -webkit-overflow-scrolling: touch;
}
.err-style {
  background-color: rgb(255, 153, 56, 1);
  color: #ffffff;
  text-align: center;
  height: 0.8rem;
  line-height: 0.8rem;
}
</style>
